<div fxLayout="column">
  <mat-card>
    <mat-card-content>
      <div class="nav-category">
        <div class="nav-category-title">专辑：</div>
        <a mat-ripple class="nav-category-item" [class.active]="setClassActive(0)" (click)="findNavLists(0)">全部</a>
        <a mat-ripple class="nav-category-item" [class.active]="setClassActive(category.id)" (click)="findNavLists(category.id)" *ngFor="let category of categories">{{ category.name }}</a>
      </div>
    </mat-card-content>
  </mat-card>
</div>

<div fxLayout="row" fxLayoutWrap>
  <div fxFlex="100" fxFlex.gt-md="20" fxFlex.gt-sm="33.3" fxFlex.gt-xs="50" *ngFor="let navigation of currentNum">
    <mat-card>
      <mat-card-title class="nav-title"><p class="card-loading-block" style="width: 94%"></p></mat-card-title>
      <div class="card-loading-content">
        <p class="card-loading-block" style="width: 94%"></p>
        <p>
          <span class="card-loading-block" style="width: 28%"></span>
          <span class="card-loading-block" style="width: 62%"></span>
        </p>
        <p>
          <span class="card-loading-block" style="width: 22%"></span>
          <span class="card-loading-block" style="width: 66%"></span>
        </p>
        <p>
          <span class="card-loading-block" style="width: 56%"></span>
          <span class="card-loading-block" style="width: 39%"></span>
        </p>
        <p>
          <span class="card-loading-block" style="width: 21%"></span>
          <span class="card-loading-block" style="width: 15%"></span>
          <span class="card-loading-block" style="width: 40%"></span>
        </p>
      </div>
    </mat-card>
  </div>

  <div fxFlex="100" fxFlex.gt-md="20" fxFlex.gt-sm="33.3" fxFlex.gt-xs="50" *ngFor="let navigation of navigations">
    <mat-card class="nav-item">
      <mat-card-title class="nav-title"><a href="{{ navigation.link }}" target="blank">{{ navigation.title }}</a></mat-card-title>
      <mat-card-content class="nav-desc">{{ navigation.description }}</mat-card-content>
    </mat-card>
  </div>
</div>

<stbui-pagination align="center" [total]="totalPages" (onPage)="page($event)"></stbui-pagination>
